<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>好友留言板</title>
<style>
  body{margin:0;padding:20px;background:#f5f5f5;font-family:Arial;}
  h2{text-align:center;margin-bottom:10px;}
  #box{max-width:500px;margin:auto;background:#fff;padding:15px;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.1);}
  textarea{width:100%;height:60px;resize:none;border:1px solid #ccc;border-radius:4px;padding:6px;font-size:14px;}
  button{margin-top:6px;background:#0077ff;color:#fff;border:none;padding:6px 12px;border-radius:4px;cursor:pointer;}
  button:hover{background:#0060df;}
  .msg{margin-top:15px;border-top:1px solid #eee;padding-top:10px;}
  .item{background:#fafafa;border-left:3px solid #0077ff;padding:8px;margin-bottom:8px;font-size:14px;display:flex;justify-content:space-between;}
  .del{background:#ff4458;color:#fff;border:none;border-radius:3px;padding:2px 6px;font-size:12px;cursor:pointer;}
</style>
</head>
<body>

<div id="box">
  <h2>好友留言板</h2>
  <textarea id="txt" placeholder="说点什么…"></textarea>
  <button onclick="add()">发表</button>

  <div id="list" class="msg"></div>
  <button onclick="localStorage.clear();load()">清空全部</button>
</div>

<script>
const txt = document.getElementById('txt');
const list = document.getElementById('list');

function add() {
  const v = txt.value.trim();
  if (!v) return;
  const arr = JSON.parse(localStorage.getItem('msgs') || '[]');
  arr.unshift(v);          // 最新在前
  localStorage.setItem('msgs', JSON.stringify(arr));
  txt.value = '';
  load();
}

function load() {
  const arr = JSON.parse(localStorage.getItem('msgs') || '[]');
  list.innerHTML = arr.map((m,i)=>`
    <div class="item">
      <span>${m}</span>
      <button class="del" onclick="del(${i})">删除</button>
    </div>`).join('');
}

function del(i) {
  const arr = JSON.parse(localStorage.getItem('msgs'));
  arr.splice(i,1);
  localStorage.setItem('msgs', JSON.stringify(arr));
  load();
}

load();   // 页面加载时渲染
</script>

</body>
</html>